<template>
    <div class="orderDetail">

        <el-row>
            <el-col :span="9" push="1">
                <p class="order">订单编号:<span>{{customerData.orderNo}}</span></p>
                <p class="order">店铺名称:<span>{{customerData.shopName}}</span></p>
                <p class="order">订单时间:<span>{{customerData.createDate}}</span></p>
                <p class="order">订单数量:<span>{{customerData.totalCount}}  件</span></p>
                <span v-if="customerData.status==3 ||customerData.status==4">
                    <p class="order">收货单:</p>
                    <el-upload
                            ref="upload"
                            list-type="picture-card"
                            action="enjoylove/order/uploadOrderPic"
                            :before-upload="beforeAvatarUpload"
                            :auto-upload="false"
                            accept=".jpg,.png,.gif"
                            :data="orderData"
                            :on-change="newhandleChange"
                            :on-success="newhandlesuccess"
                            :file-list="fileList"
                            >
                    <i class="el-icon-plus"></i>
                </el-upload>
                </span>
                <!--<p class="order">收货单:-->
                    <!--<input v-if="customerData.status==3" style="margin-left: 20px" id="file" name="file" type="file" accept="image/png,image/gif,image/jpeg" onclick="uploadpic(event)"/>-->
                <!--</p>-->
                <!--<img v-if="customerData.deliveryNote" style="margin-left: 75px" width="200px" height="200px" :src="`https://forca.yjlbld.com${customerData.deliveryNote}`"/>-->
            </el-col>
            <el-col :span="9" :offset="4">
                <p class="order">客户名称:<span>{{customerData.consignee}}</span></p>
                <p class="order">所属区域:<span>{{customerData.area}}</span></p>
                <p class="order">订单状态:<span >{{stateString}}</span></p>
                <p class="order">收货数量:<span>{{counts}}</span></p>
            </el-col>
        </el-row>


        <el-table :data="productData" stripe highlight-current-row v-loading="listLoading" style="width: 100%;">
            <el-table-column prop="productBarCode" label="商品条码" align="center"></el-table-column>
            <el-table-column prop="productTitle" label="商品名称" align="center"></el-table-column>
            <el-table-column prop="productSpec" label="商品规格"  align="center"></el-table-column>
            <el-table-column prop="productFleetSales" label="最小批发量" align="center"></el-table-column>
            <el-table-column prop="productPerCarton" label="箱规"  align="center"></el-table-column>
            <el-table-column prop="itemOfAmount" label="订货数量"  align="center"></el-table-column>
            <el-table-column prop="deliveringAmount" label="发货数量" align="center"></el-table-column>
            <el-table-column prop="receiptAmount" label="收货数量" align="center" :formatter="numformatter">
                <!--<template slot-scope="scope" >-->
                <!--<el-input size="small"  v-if="customerData.status==3" v-model="num[`${scope.row.productId}`]" placeholder="输入收货数量"-->
                <!--@blur="checkParams(event,scope.row, scope.$index,this)"></el-input>-->
                <!--<div v-if="customerData.status!=3">{{scope.row.receiptAmount}}</div>-->
                <!--</template>-->
            </el-table-column>
        </el-table>
        <!--工具条-->
        <p  style="text-align: center">
            <!--<el-button v-if="customerData.status==3" type="primary" @click="uplodaPic"  size="mini">保存</el-button>-->
            <el-button  @click="goback"  size="mini">返回</el-button>
        </p>


    </div>
</template>

<script>
    import ElCol from "element-ui/packages/col/src/col";
    import ElFormItem from "../../../node_modules/element-ui/packages/form/src/form-item.vue";
    import * as api from "../../api/enjoylove_api"
    import ElInput from "../../../node_modules/element-ui/packages/input/src/input.vue";

    let imgDiv = document.getElementsByClassName('el-upload')

    export default {
        components: {
            ElInput,
            ElFormItem,
            ElCol},
        data() {
            return {
                orderData :{},
                productData :[],//商品列表
                deliveryNote:[],//图片列表
                customerData:{},// 客户信息
                imageUrl:'',
                listLoading :false,
                stateString :'--',
                counts:0,
                num:{},
                isPass:true,
                fileList:[],
            }
        },
        methods: {
            beforeAvatarUpload (file, fileList) {
                console.log(fileList)
                var fileName=new Array()
                fileName =file.name.split('.');
                const extension = fileName[fileName.length-1] === 'jpg'
                const extension2 =  fileName[fileName.length-1]=== 'png'
                const extension3 =  fileName[fileName.length-1]=== 'gif'
                const isLt2M = file.size / 1024 / 1024 < 2

                if (!extension && !extension2 && !extension3) {
                    this.$message({
                        message: '上传图片只能是.jpg、.png、.gif格式!',
                        type: 'warning'
                    });
                }
                if (!isLt2M) {
                    this.$message({
                        message: '上传图片大小不能超过 2MB!',
                        type: 'warning'
                    });
                }

                if (extension || extension2 || extension3 && isLt2M == true) {

                    let fd = new FormData()
                    fd.append('file', file)

                    return true
                }
                return extension || extension2 || extension3 && isLt2M
            },
            newhandlesuccess (res, file, fileList) {
                console.log(fileList)
//                console.log(JSON.parse(res).data.attcId)
//                fileList.forEach((val) => {
//                    if (!val.id) {
//                        val.id = JSON.parse(res).data.attcId
//                    }
//                })

                let response = JSON.parse(file.response)
                if (response){
                    this.$message({
                        message: '保存成功！',
                        type: 'success'
                    });
                }else {
                    this.$message({
                        message: '保存失败！',
                        type: 'warning'
                    });
                }

            },
            //获取订单信息
            getOrderDetail(){
                this.listLoading = true;
                api.getOrderDetailByID({id:this.orderData.orderId}).then((res) =>{
                    this.listLoading = false;//停止加载
                    var _resData  =JSON.parse(res.data) ;
                    if(!_resData.status){
                        if(_resData.success){
                            //成功
                            this.productData = _resData.data.order.items;
                            this.deliveryNote = _resData.data.order.deliveryNote;
                            for(var index in this.productData){
                                var temp=this.productData[index];
                                if (temp.receiptAmount==null){
                                    temp.receiptAmount==0
                                }

                                this.counts = temp.receiptAmount+this.counts;
                            }
                            for (var i = 0; i<this.deliveryNote.length; i++){
                                this.fileList.push(
                                    {
                                    url: 'https://forca.yjlbld.com'+this.deliveryNote[i]
                                    }
                                )
                            }
                            this.customerData = _resData.data.order;
                            if(this.customerData.status==1){
                                this.stateString = '待付款'
                            }else  if (this.customerData.status==2){
                                this.stateString = '待发货'
                            }else  if (this.customerData.status==3){
                                this.stateString = '待收货'
                            }else  if (this.customerData.status==4){
                                this.stateString = '已完成'
                            } else {
                                this.stateString = '已取消'
                            }
                        }else {
                            this.$message.error(_resData.message);
                        }
                    }else{
                        if(_resData.status == 401){
                            this.$router.push('/login');
                        }
                    }
                });
            },
            //返回
            goback(){
                this.$router.push('/order')
            },
//            checkParams(event,row,index,input){
//                if(isNaN(this.num[row.productId])){
//                    this.$message.error('请输入数字!');
//                }
//                if (this.num[row.productId]>row.itemOfAmount){
//                    this.$message.error('收货数量不得大于订货数量!');
//                }
//                input.valueOf('');
//            },
            numformatter(val){

                if(val.receiptAmount==''||val.receiptAmount==null){
                    return '--';
                }else {
                    return val.receiptAmount;
                }
            },
            newhandleChange(event, fileList,){

                if (event.status=='ready'){
                    this.$confirm('此操作将上传该图片,并且上传后不能删除图片, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.$refs.upload.submit();
                    }).catch(() => {
                        fileList.splice(fileList.length-1,1);
                        this.fileList = fileList;
                        this.$message({
                            type: 'info',
                            message: '已取消'
                        });
                    });
                }

            }
    },
        //启动时调用
        mounted() {
            this.orderData=this.$route.query;
            this.$nextTick(function () {
                this.getOrderDetail();
            });
        }
    }
</script>

<style>
    .orderDetail .el-upload-list--picture-card .el-upload-list__item-actions{display:none!important;}
    .orderDetail .order span{margin-left: 10px}
    .orderDetail .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        margin-left: 72px;
    }
    .orderDetail .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .orderDetail .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .orderDetail .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>

